<template>
  <el-row
    v-if="data.length"
    :gutter="20"
  >
    <el-col
      v-for="(item, index) in data"
      :key="index"
      :xs="24"
      :sm="12"
      :md="12"
      :lg="8"
      :xl="6"
    >
      <div
        class="card-item"
        @click="clickHandle(item)"
      >
        <div class="card-itemTop">
          <div class="card-itemTopRoom">
            <slot
              name="icon"
              :item="item"
            >
              <img
                src="@/assets/images/room.png"
                alt=""
              />
            </slot>
          </div>
          <div class="card-itemTopContent">
            <slot
              name="title"
              :item="item"
            >
              <span>{{ item.userName }}</span>
              <span>房间号：{{ item.houseNum }}</span>
            </slot>
          </div>
          <slot
            name="status"
            :item="item"
          />
        </div>
        <ul class="card-item-content-list">
          <slot
            name="content"
            :item="item"
          />
        </ul>
      </div>
    </el-col>
  </el-row>
  <NoData v-else />
</template>

<script lang="ts" setup>
/**
 * 卡片样式列表
 * @prop data {Array} 列表数据
 * @slot icon 卡片图标插槽，有默认图标显示
 * #icon="{ item }"
 * @slot title 标题插槽，
 * #title="{ item }"
 * 默认显示<span>{{ item.userName }}</span><span>{{ item.houseNum }}</span>
 * @slot status 状态插槽
 * #status="{ item }"
 * @slot content
 * #content="{ item }"
 * eg: <li><span>{{ item.dayFee || "-" }}</span><span>今日费用（元）</span></li>
 * @event clickitem 点击卡片事件
 * {return: item当前卡片数据}
 */
import NoData from "@/components/NoData/Index.vue";

defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const clickHandle = (item: any) => {
  emits("clickitem", item);
};

const emits = defineEmits(["clickitem"]);
</script>

<style lang="scss" scoped>
.card-item {
  position: relative;
  padding: 24px;
  margin-bottom: 21px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.06);
  border-radius: 8px 8px 8px 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;

  .card-itemTop {
    flex: 1;
    display: flex;
    margin-bottom: 20px;

    .card-itemTopContent {
      flex: 1;
      color: #333333;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      font-weight: 400;
      font-size: 16px;

      span:nth-child(1) {
        margin-bottom: 10px;
        font-weight: 400;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      span:nth-child(2) {
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .card-itemTopRoom {
      margin-right: 16px;
      width: 64px;
      height: 64px;
      background: #ccf5ec;
      border-radius: 8px 8px 8px 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-itemTopSignal {
      padding: 10px 16px;
      height: 32px;
      display: flex;
      align-items: center;
      background: #f7f9fb;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #c3c8ce;
      color: #838d9a;

      img {
        margin-right: 4px;
      }
    }

    .signalActive {
      border-color: #03cca1 !important;
      background: rgba(3, 204, 161, 0.1) !important;
      color: #03cca1;
    }
  }

  .card-item-content-list {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;

    :deep(li) {
      overflow: hidden;
      display: flex;
      width: 48%;
      height: 100%;
      background: #f7f9fb;
      border-radius: 8px 8px 8px 8px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #333333;
      padding: 10px 0px;

      span:nth-child(1) {
        padding: 4px;
        width: 100%;
        font-size: 30px;
        font-weight: bold;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
      }

      span:nth-child(2) {
        margin-top: 2px;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
      }
    }
  }
}
</style>
